<template>
    <div class="update-name">
        <van-nav-bar
        left-text="取消"
         title="修改昵称"
         right-text="完成"
         @click-left="$emit('close')"
         @click-right="onConfirm"
       />
       <div class="name-field">
       <van-field
        v-model="localName"
        rows="2"
        autosize
        type="textarea"
        maxlength="11"
        placeholder="请输入昵称"
        show-word-limit
      />
      </div>
    </div>
</template>
<script>
import Vue from "vue";
import { Toast } from "vant";
Vue.use(Toast);
export default {
  components: {},
  props: {
    name: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      localName: this.name
    };
  },
  methods: {
    onConfirm() {
      //更新用户昵称/user/revise
      this.axios
        .put(
          "/user/revise",
          `phone=${this.$store.state.phone}&sname=${this.localName}`
        )
        .then(res => {
          // console.log(res.data.code)
          // console.log(this.$store.state.phone)
          if (this.$store.state.phone == "") {
            Toast.fail("请您先登录！");
            this.$router.push("/login");
            return;
          }
          if (res.data.code == 201) {
            Toast.fail("修改失败！");
          } else if (res.data.code == 200) {
            Toast.success("修改成功！");
            this.$emit("close");
            this.$emit("update-name", this.localName);
          }
        });
    }
  }
};
</script>
<style scoped>
.name-field {
  padding: 0.625rem;
}
</style>

